<template>
  <div class="block">
    <el-carousel :interval="3000" height="200px">
      <el-carousel-item v-for="(item, index) in bannerData" :key="index">
        <!-- 直接放置图片，并确保其填充容器 -->
        <img :src="item.imageUrl" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

// 定义组件接收的 props
// bannerData 应该是一个包含 { imageUrl: string } 对象的数组
defineProps({
  bannerData: {
    type: Array,
    required: true, // 根据实际情况设置是否必需
    default: () => [], // 提供默认值
  },
});

// 在实际应用中，您可能会在这里或父组件中通过 API 调用获取 bannerData
// 例如：
// import { ref, onMounted } from 'vue';
// const bannerData = ref([]);
// onMounted(async () => {
//   try {
//     const response = await fetch('/api/banners/all'); // 假设您的API接口
//     const result = await response.json();
//     if (result.code === 1 && result.data) {
//       bannerData.value = result.data;
//     } else {
//       console.error('获取轮播图数据失败:', result.msg);
//     }
//   } catch (error) {
//     console.error('请求轮播图数据时发生错误:', error);
//   }
// });
</script>

<style scoped>
/* 确保el-carousel-item占据其父容器的全部高度和宽度 */
.el-carousel__item {
  height: 100%; /* 继承el-carousel的200px高度 */
  width: 100%; /* 确保宽度也填充 */
  display: flex; /* 使用flex布局使图片居中 */
  justify-content: center;
  align-items: center;
  overflow: hidden; /* 隐藏超出容器的部分 */
}

/* 为轮播图中的图片添加样式 */
.carousel-image {
  width: 100%; /* 图片宽度填充其父容器 */
  height: 100%; /* 图片高度填充其父容器 */
  object-fit: cover; /* 保持图片宽高比，同时填充整个容器，可能会裁剪图片的一部分 */
  /* 如果您希望图片完整显示且不被裁剪（可能会出现空白），请使用 object-fit: contain; */
  /* object-fit: contain; */
}

/* 轮播图外部容器样式，使其在页面中居中并美观 (如果这个组件是直接放在页面中，可以保留) */
/* 如果这个组件会被其他父组件包含，这些样式可能需要在父组件中定义 */
.block {
  width: 100%; /* 组件宽度通常由父组件决定 */
  /* max-width: 800px; */ /* 如果需要最大宽度限制 */
  border-radius: 8px;
  overflow: hidden;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */ /* 阴影效果 */
}
</style>
